<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>进行中的流程</span>
    </div>
    <el-table :data="instanceArray.filter(data => {
      const ProcessInstanceName = data.ProcessInstanceName? data.ProcessInstanceName.toString() : ''
      return!search ||
             ProcessInstanceName.toLowerCase().includes(search.toLowerCase())
    })" :size="size">
      <el-table-column type="index" label="序号" min-width="5%"></el-table-column>
      <el-table-column label="实例名称" prop="ProcessInstanceName" min-width="10%"></el-table-column>
      <el-table-column label="实例ID" prop="ProcessInstanceID" min-width="14%"></el-table-column>
      <el-table-column label="实例定义ID" prop="ProcessDefinitionID" min-width="20%"></el-table-column>
      <el-table-column label="实例定义KEY" prop="ProcessDefinitionKey" v-if="false"></el-table-column>
      <el-table-column label="开始时间" prop="ProcessStartDate" min-width="9%"></el-table-column>
      <el-table-column label="业务表单KEY" prop="BusinessKey" min-width="10%"></el-table-column>
      <el-table-column label="状态" prop="Status" min-width="5%"></el-table-column>
      <el-table-column label="流程部署ID" prop="ProcessDeploymentID" v-if="false"></el-table-column>
      <el-table-column label="流程资源名称" prop="ProcessResourceName" v-if="false"></el-table-column>
      <el-table-column min-width="12%">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search" clearable
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button type="text" size="mini"
                     @click="suspendInstance(scope.row.ProcessInstanceID)">挂起
          </el-button>
          <el-button type="text" size="mini"
                     @click="resumeInstance(scope.row.ProcessInstanceID)">激活
          </el-button>
          <el-button type="text" size="mini"
                     @click="deleteInstance(scope.row.ProcessInstanceID,scope.$index)">删除
          </el-button>
          <el-button type="text" size="mini"
                     @click="historyInstance(scope.row.ProcessInstanceID)">历史
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<script>
export default {
  name: "InstanceList",
  data() {
    return {
      size: "mini",
      search: '',
      instanceArray: [{
        ProcessInstanceName: '',
        ProcessInstanceID: '',
        ProcessDefinitionID: '',
        ProcessDefinitionKey: '',
        ProcessStartDate: '',
        BusinessKey: '',
        Status: '',
        ProcessDeploymentID: '',
        ProcessResourceName: '',
      }]
    }
  },
  methods: {
    suspendInstance(id) {
      this.$http.post("/instance/suspend/" + id).then( (response) => {
        if (response.data.code == 1) {
          console.log(response.data.data);
          alert("挂起成功")
        } else {
          alert("挂起失败")
        }
      })
    },
    resumeInstance(id) {
      this.$http.post("/instance/resume/" + id).then( (response) => {
        if (response.data.code == 1) {
          alert("激活成功");
          console.log(response.data.data)
        } else {
          alert("激活失败")
        }
      })
    },
    historyInstance(id) {
      this.$http.get('/history/' + id).then( (response) => {
        if (response.data.code == 1) {
          console.log(response.data.data)
        } else {
          alert("查询失败")
        }
      })
    },
    deleteInstance(id,index) {
      this.$http.delete("/instance/delete/" + id).then((response) => {
        if (response.data.code == 1) {
          this.instanceArray.splice(index,1)
          alert("删除成功");
        } else {
          alert("删除失败")
        }
      })
    }

  },
  created: function () {
    this.$http.get("/instance").then((response) => {
      if (response.data.code == 1) {
        this.instanceArray = response.data.data;
        console.log(JSON.stringify(this.instanceArray, null, 2))
      } else {
        alert("请先登录")
        location.href = "/login";
      }
    })

  }

}
</script>

<style scoped>

</style>